<template>
	<view class="container box">
		<view class="title inner-center">
			注册
		</view>
		<view class="input-data">
			<view class="preTxt">
				+86
			</view>
			<input @blur="checkPhone" maxlength="11" type="number" placeholder-class="placeholder-class"
				v-model.trim="formData.phone" placeholder="请输入手机号" />
		</view>
		<view class="input-data">
			<view class="preTxt">
				email
			</view>
			<input @blur="checkEmail" v-model="formData.email" type="text" placeholder-class="placeholder-class"
				placeholder="请输入邮箱" />

		</view>
		<view class="input-data">
			<input @blur="checkPwd" v-model.trim="formData.pwd" :type="pwdType?'password':'text'"
				placeholder-class="placeholder-class" placeholder="请输入密码" />
			<uni-icons v-if="formData.pwd" :type="pwdType?'eye-slash':'eye'" size="25" color="white"
				@click="pwdType=!pwdType"></uni-icons>
		</view>
		<view class="input-data">
			<input @blur="checkRePwd" v-model.trim="formData.repwd" :type="repwdType?'password':'text'"
				placeholder-class="placeholder-class" placeholder="请输入确认密码" />
			<uni-icons v-if="formData.repwd" :type="repwdType?'eye-slash':'eye'" size="25" color="white"
				@click="repwdType=!repwdType"></uni-icons>

		</view>
		<view class="btn-register ">
			<button @click="registerFn">注册</button>
		</view>
		<view class="login " @click="$go2Page('login')">
			登录
		</view>
	</view>
</template>

<script>
	import {
		phoneVerify,
		emialVerify,
		pwdVerify
	} from '../../util/verify.js'

	import {
		addData
	} from '../../database/index.js'

	export default {
		data() {
			return {
				pwdType: true,
				repwdType: true,
				formData: {
					phone: '',
					email: '',
					pwd: '',
					repwd: ''
				},
			}
		},
		methods: {
			checkPhone() {
				let res, msg;
				[res, msg] = phoneVerify(this.formData.phone)
				if (!res) {
					this.$showMsg(msg)
				}
				return res
			},
			checkEmail() {
				let res, msg;
				[res, msg] = emialVerify(this.formData.email)
				if (!res) {
					this.$showMsg(msg)
				}
				return res
			},
			checkPwd() {
				let res, msg;
				[res, msg] = pwdVerify(this.formData.pwd)
				if (!res) {
					this.$showMsg(msg)
				}
				return res
			},
			checkRePwd() {
				let res, msg;
				[res, msg] = pwdVerify(this.formData.repwd)
				if (!res) {
					this.$showMsg(msg)
				}
				if (!res) {
					return res
				}
				if (this.formData.pwd != this.formData.repwd) {
					this.$showMsg('前后密码不一致')
					return false
				}
				return true
			},
			clear() {
				this.formData = {
					phone: '',
					email: '',
					pwd: '',
					repwd: ''
				}
			},
			async registerFn() {
				if (this.checkPhone() && this.checkEmail() && this.checkPwd() && this.checkRePwd()) {
					let [res, msg] = await addData('user', {
						user_account: this.formData.phone,
						user_pwd: this.formData.pwd,
						user_email: this.formData.email,
					}, [{
							user_account: this.formData.phone,
						},
						{
							user_email: this.formData.email,
						}
					])
					console.log(res, msg);
					if (res) {
						this.$showMsg('注册成功')
						this.clear()
						this.$go2Page('login')
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.box {
		position: relative;
		padding: 30rpx 70rpx;
		padding-top: 0;
		background: linear-gradient(#483d8b, #7B68EE);

		.title {
			font-size: 1.5rem;
			letter-spacing: 0.2rem;
			margin-bottom: 80rpx;
		}



		.login {
			text-align: right;
			color: #fff9ff;
			top: 650rpx;
			letter-spacing: 0.1rem;
			margin-top: 40rpx;
		}

		.btn-register {
			margin-top: 60rpx;

			button {
				border-radius: 40rpx;
				width: 400rpx;
				color: white;
				background-color: #483d8b;
			}
		}
	}



	.input-data {
		display: flex;
		background-color: rgba(255, 255, 255, .3);
		border-radius: 40rpx;
		padding: 20rpx 40rpx;
		margin-bottom: 30rpx;

		.preTxt {
			width: 60rpx;
			margin-right: 40rpx;
		}

		.placeholder-class {
			color: rgba(255, 255, 255, .3);
		}
	}
</style>